import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';
import ModalText from "../../../../components/ModalText";

import error from '../../../../assets/imgs/test/error.png'
import waring from '../../../../assets/imgs/test/waring.png'
import {logTop10} from "../../../../type/firstType";
import {observable} from "mobx";


interface IProps {
    borderBottom: string
    borderTop: string
    predictWarning: logTop10[]
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    @observable
    public index: number = 0

    @observable
    public isShow: boolean = false

    public handleLeave = () => {
        this.isShow = false
    }

    public render() {
        const {borderBottom, borderTop, predictWarning} = this.props
        return (
            <div className={styles.swiper} style={{borderBottom: borderBottom}}>
                <div className={styles.title} style={{borderTop: borderTop}}>
                    {/* <span className={styles.span} title="预警状态">预警状态</span> */}
                    <span className={styles.spanWidth} title="机器编号"><ModalText text='机器编号' long={10} /></span>
                    <span className={styles.spanWidth} title="医院名称"><ModalText text='医院名称' long={10} /></span>
                    <span className={styles.spanWidth} title="日期"><ModalText text='日期' long={10} /></span>
                    {/* <span className={styles.spanWidth} title="日期"><ModalText text='错误率' long={10} /></span> */}
                    <span className={styles.spanWidth} title="描述"><ModalText text='描述' long={10} /></span>
                    <span className={styles.spanWidth} title="trip#"><ModalText text='trip#' long={10} /></span>
                </div>
                <div className={styles.swiperC}>
                    {
                        predictWarning.length > 0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={8} autoplaySpeed={2000}>
                            {
                                predictWarning.map((item, index) => {
                                    return (
                                        <div className={index % 2 === 0 ? styles.list1 : styles.list} key={`itenSw_${index}`}>
                                            {/* { <img src={item.errorRate >0 ? error : waring}
                                                 className={styles.error} />} */}
                                            <div className={styles.list1C} >
                                                <span className={styles.spanWidth} title={item.machineId}><ModalText text={item.machineId}
                                                                                              long={10} /></span>
                                                <span className={styles.spanWidth} title={item.locationName}><ModalText text={item.locationName}
                                                                                              long={10} /></span>
                                                <span className={styles.spanWidth} title={item.time}><ModalText text={item.time}
                                                                                              long={10} /></span>
                                                {/* <span className={styles.spanWidth}>{item.errorRate}</span> */}
                                                <span className={styles.spanWidth} title={item.description.replace('[', '').replace('\"', '').replace(']','')}><ModalText
                                                    text={item.description.replace('[', '').replace('\"', '').replace(']','')}
                                                    long={20} /></span>
                                                <span className={styles.spanWidth}>{item.trip}</span>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
